<template>

  <el-card class="detail-card">
    <Title title="发票信息" style="padding: 0 0 24px 0" />
    <el-table
      :data="handelData(invoiceInfo)"
      class="table-fixed"
      element-loading-text="加载中..."
      empty-text="暂无数据"
      header-cell-class-name="order-data-header-cell"
      fit
      hightlight-current-row>
      <el-table-column align="left" label="发票编号" min-width="140">
        <template slot-scope="scope">
          <span class="cell-font-color">{{ scope.row.no || '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="发票号码" min-width="100">
        <template slot-scope="scope">
          <span class="cell-font-color">{{ scope.row.number ? 'NO.' + scope.row.number : '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="申请人" min-width="80">
        <template slot-scope="scope">
          <span class="cell-font-color">{{ scope.row.proposer }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="开票日期" min-width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.invoiceDate" class="cell-font-color">{{ scope.row.invoiceDate | format('YYYY/MM/DD') }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="含税金额（元）" min-width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.amountFen || scope.row.amountFen === 0" class="cell-font-color">{{ (scope.row.amountFen / 100) | moneyFilter }}</span>
          <span v-else class="cell-font-color">--</span>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
import Title from '@/components/Title';
import { format } from '@/filters/date';
import { moneyFilter } from '@/filters/number';
export default {
  components: { Title },
  filters: { format, moneyFilter },
  props: {
    invoiceInfo: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  computed: {
    relatedOrders() {
      if (this.invoiceInfo.relatedOrderIds.length > 0) {
        const orderIds = this.invoiceInfo.relatedOrderIds.map(i => i.sn);
        return orderIds.join(',');
      } else {
        return '';
      }
    }
  },
  methods: {
    handelData(data) {
      const res = [];
      if (this.isArray(data)) {
        return data;
      } else {
        res.push(data);
        return res;
      }
    },
    isArray(data) {
      return Array.isArray(data);
    }
  }
};
</script>
